<template>
  <a-table :columns="columns" :data-source="data"
           :pagination="pagination"
           @change="handleTableChange"
  ></a-table>
</template>

<script>
import axios from "axios"
import { ref,onMounted} from "vue"
export default {
  name: "demo",
  setup(){
    console.log("setup Demo")
    const data = ref([])
    const columns = ref([
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: 'title',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: 'author',
        dataIndex: 'author',
        key: 'author',
      },
      {
        title: 'summary',
        key: 'summary',
        dataIndex: 'summary',
      },
    ])
    const pagination = ref({
      current:1,
      pageSize:2,
      total:''
    })
    onMounted(()=>{
      console.log("onMounted Demo")
      load()
    })

    function load(){
      axios.get("api/findNews",{
        params:{
          currentPage:pagination.value.current,
          pageSize:pagination.value.pageSize
        }
      }).then(res =>{
        console.log(res)
        data.value = res.data.data.list
        pagination.value.current = res.data.data.pageNum
        pagination.value.pageSize = res.data.data.pageSize
        pagination.value.total = res.data.data.total
      })
    }

    function handleTableChange(pagination2) {
      console.log("handleTableChange")
      pagination.value = pagination2
      load()
    }

    return{
      columns,
      data,
      pagination,
      handleTableChange
    }

  }
}
</script>

<style scoped>

</style>